<template>
  <q-input lined :model-value="modelValue" label="选择姿态" @update:model-value="input">
    <template v-slot:append>
      <q-btn icon="precision_manufacturing" color="primary" padding="sm" @click="show"/>
    </template>
    <q-dialog v-model="visible">
      <q-card style="max-height: calc(100vh - 2rem); max-width: 90vw">
        <q-card-section class="row items-center q-gutter-x-sm no-wrap overflow-auto" style="min-width: 20rem;">
          <template v-if="$q.screen.gt.xs">
            <div class="text-h6 text-bold text-center text-grey-7">选择姿态</div>
            <q-space/>
          </template>
          <q-select v-model="param.type" :options="postureType" label="姿态类型" map-options emit-value clearable
                    behavior="menu" outlined dense style="min-width: 8rem" @popup-hide="getPostureList"
                    @clear="getPostureList"
          />
          <q-select v-model="param.group" :options="groups" label="姿态分组" clearable
                    behavior="menu" outlined dense style="min-width: 8rem" @popup-hide="getPostureList"
                    @clear="getPostureList"
                    option-label="name"/>
          <q-btn label="清空" icon="clear" color="primary" @click="input('')" v-close-popup/>
        </q-card-section>
        <q-separator/>
        <q-slide-transition>
          <div v-if="postureList.length !== 0">
            <q-card-section
              style="max-height: calc(100vh - 10rem); min-height: 10rem; min-width: 15rem; overflow: auto"
              class="row items-center justify-center">
              <q-card v-for="posture in postureList" v-bind:key="posture.id"
                      class="q-ma-sm"
                      @click="select(posture)"
                      style="min-width: 15rem">
                <q-card-section class="row items-center">
                  <div class="text-h6 text-bold text-black no-wrap overflow-hidden"
                       style="width: calc(100% - 4rem); height: 2rem">{{ posture.name }}
                  </div>
                </q-card-section>
                <q-separator/>
                <q-list>
                  <q-item dense v-for="item in items" v-bind:key="item.key" clickable v-ripple>
                    <q-item-section>{{ item.title }}</q-item-section>
                    <q-item-section side>{{ posture[item.key] }}</q-item-section>
                  </q-item>
                </q-list>
              </q-card>
            </q-card-section>
          </div>
        </q-slide-transition>
      </q-card>
    </q-dialog>
  </q-input>
</template>

<script>
import {onMounted, ref} from 'vue'
import {api} from 'boot/axios.js'
import {useAPIStore} from 'stores/api/index.js'

const items = [
  {title: '分组', key: 'group'},
  {title: '类型', key: 'type'}
]

const postureType = [
  {label: '散点', value: 'normal'},
  {label: '工位(抓取)点', value: 'reference'},
  {label: '校准点', value: 'calibration'},
  {label: 'HOME准备点', value: 'home'},
  {label: '过渡点', value: 'transition'}
]

export default {
  name: 'PostureSelector',
  props: {
    modelValue: String
  },
  setup(props, context) {
    const visible = ref(false)

    const posture = ref({})
    const postureUrl = useAPIStore().postureUrl
    const postureList = ref([])
    const groups = ref([])
    const param = ref({
      type: null,
      group: null
    })

    function getPosture() {
      if (props.modelValue !== '') {
        api.get(postureUrl + 'posture/id/' + props.modelValue).then(rs => {
          posture.value = rs.data
        })
      }
    }

    function getPostureList() {
      api.get(postureUrl + 'posture', {params: param.value}).then(rs => {
        postureList.value = rs.data
      })
      api.get(postureUrl + 'posture/groups').then(rs => {
        groups.value = rs.data
      })
    }

    onMounted(() => {
      getPosture()
      getPostureList()
    })

    return {
      param,
      groups,
      postureList,
      items,
      postureType,
      posture,
      visible,
      show() {
        getPosture()
        visible.value = true
      },
      getPostureList,
      select(data) {
        posture.value = data
        context.emit('update:modelValue', posture.value.id)
        visible.value = false
      },
      input(data) {
        context.emit('update:modelValue', data)
      }
    }
  }
}
</script>
